<template>
  <div class="accessoryMain">
    <div class="accessoryBox">
      <div class="itemBox" v-for="(item, index) in list" :key="index">
        <img :src="require(`@/assets/fileType/${fileSuffix(item)}.png`)" alt="file">
        <h3 class="ellipsis">{{ item.name }}</h3>
        <div class="flex align-center justify-between">
          <el-tag size="mini" type="success" effect="dark" style="margin-right: 10px;">
            {{ fileSuffix(item) }}
          </el-tag>
          <el-button type="primary" round size="mini" @click="downloadAnnex(item)">下载</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {download} from "@/utils/request";

export default {
  name: '',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    fileSuffix(item) {
      const {url} = item;
      const suffix = url.substring(url.lastIndexOf(".") + 1, url.length);
      return !!suffix ? suffix.toUpperCase() : '';
    },
    downloadAnnex(item) {
      const {name, url} = item;
      const suffix = url.substring(url.lastIndexOf("."), url.length);
      const a = document.createElement('a');
      a.setAttribute('download', name + suffix);
      a.setAttribute('target', '_blank');
      a.setAttribute('href', url);
      a.click();
    },
  },
}
</script>
<style lang="scss" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itemBox {
  padding: 32px 32px 28px 90px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
  box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
  border-radius: 8px;
  position: relative;
  margin-top: 12px;
  background: #fff;

  img {
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -25px;
  }

  h3 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    line-height: 22px;
    text-align: justify;
  }
}
</style>
